<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :placeholder="true" />
    <div class="page-main">
      <div class="search-container">
        <div class="pg-searc-input">
          <input class="search-input" type="text" placeholder="请输入关键词" v-model="keyword" @keyup.enter="loadNewsList('init')"/>
          <div class="input-clear-box flex-center">
            <div class="input-clear-icon hv-opacity" v-if="keyword != ''" @click="keyword = ''"></div>
          </div>
          <div class="search-submit" @click="onSearch">
            <i class="iconfont icon-search"></i>
          </div>
        </div>
        <div class="search-main">
          <div class="search-title">
            <div class="title">新闻资讯</div>
            <div class="desc">搜到 {{ total }} 条结果</div>
          </div>
          <div class="news-result">
            <div class="news-list">
              <a :href="'news_detail.html?id=' + item.id" target="_blank" class="news-card hv-opacity" v-for="(item, index) in list" :key="index">
                <div class="photo">
                  <img oncontextmenu="return false" :src="item.photo" class="fit-img" alt="">
                </div>
                <div class="news-info">
                  <span class="news-tag flex-center" :style="`background: ${item.cate_info.color || '#FC5821'};`">{{ item.cate_info.title }}</span>
                  <span class="news-date">{{ item.create_time }}</span> 
                </div>
                <div class="news-title text-wrap-2">
                  {{ item.title }}
                </div>
                <div class="news-desc text-wrap-2">
                  {{ item.titles }}
                </div>
              </a>
            </div>
            <div class="empty-box flex-center" v-if="hasResult && list.length == 0">
              <img oncontextmenu="return false" src="@/assets/images/empty.png" alt="" class="empty-img">
              <p class="empty-text">暂无新闻资讯搜索  请您换个关键词试试</p>
            </div>
            <!-- <div class="bottom-tips" v-if="hasResult && list.length >= total">已经到底啦~</div> -->
          </div>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getUrlParams, hideLoading } from '../../utils/utils'
import { getNewsList } from '@/api/news'
import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

const theme = ref('white')
const keyword = ref('')
const list = ref([])
const total = ref(0)
const hasResult = ref(false)

onMounted(() => {
  let _keyword = getUrlParams('keyword') || ''
  keyword.value = decodeURIComponent(_keyword)
  loadNewsList()
  // if (_keyword) {
  //   loadNewsList()
  // }
  hideLoading()
});

const loadNewsList = type => {
  if (type == 'init') {
    list.value = []
    hasResult.value = false
    total.value = 0
  }
  const params = {
    cate_id: '',
    keywords: keyword.value
  }
  getNewsList(params).then(res => {
    list.value = list.value.concat(res.data)
    total.value = list.value.length
    hasResult.value = true
  })
};

</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.page-main {
  padding: 5.625rem /* 90/16 */ 10rem /* 160/16 */ 3.125rem /* 50/16 */;
  min-height: calc(100vh - 4.375rem /* 70/16 */);
}
.pg-searc-input {
  width: 36.25rem /* 580/16 */;
  height: 3rem /* 48/16 */;
  border-radius: 6.25rem /* 100/16 */;
  background: #F6F6F6;
  display: flex;
  align-items: center;
  padding: 0 1.5625rem /* 25/16 */ 0 1.875rem /* 30/16 */;
  margin: 0 auto;
  .search-input {
    flex: 1;
    width: 0;
    height: 3rem /* 48/16 */;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem /* 16/16 */;
    &::placeholder {
      color: rgba(0,0,0,.4);
    }
  }
  .input-clear-box {
    width: 1.25rem /* 20/16 */;
    height: 1.25rem /* 20/16 */;
    .input-clear-icon {
      width: .875rem /* 14/16 */;
      height: .875rem /* 14/16 */;
      border-radius: 50%;
      background: rgba(136,136,136,.4);
      position: relative;
      &::before {
        content: '';
        display: block;
        width: .5rem /* 8/16 */;
        height: 1px;
        background: #FFFFFF;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      &::after {
        content: '';
        display: block;
        width: .5rem /* 8/16 */;
        height: 1px;
        background: #FFFFFF;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
  }
  .search-submit {
    margin-left: 1.875rem /* 30/16 */;
    i {
      color: rgba(0,0,0,.4);
      font-size: 1rem /* 16/16 */;
    }
  }
}
.search-main {
  margin: 5.625rem /* 90/16 */ auto 0;
  width: 100rem /* 1600/16 */; 
  max-width: 92%;
}
.search-title {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.875rem /* 30/16 */;
  border-bottom: 1px solid #F2F2F2;
  .title {
    font-size: 1.875rem /* 30/16 */;
    line-height: 1;
    color: #000000;
    font-weight: 500;
  }
  .desc {
    font-size: .875rem /* 14/16 */;
    margin-left: .9375rem /* 15/16 */;
    color: #595757;
    line-height: 1;
  }
}
.news-card {
  width: calc(33.33% - 2.25rem /* 36/16 */);
  margin: 0 1.125rem /* 18/16 */;
  &:nth-child(n+4) {
    margin-top: 2.5rem /* 40/16 */;
  }
  .photo {
    width: 100%;
    height: 20rem /* 320/16 */;
  }
  .news-info {
    margin-top: 1.875rem /* 30/16 */;
    display: flex;
    align-items: center;
  }
  .news-tag {
    padding: .3125rem /* 5/16 */ .375rem /* 6/16 */;
    background: #E50012;
    font-size: .625rem /* 10/16 */;
    color: #FFFFFF;
    font-weight: 500;
    margin-right: .75rem /* 12/16 */;
  }
  .news-date {
    font-size: .75rem /* 12/16 */;
    line-height: 1;
    color: #595757;
  }
  .news-title {
    margin-top: 1.5625rem /* 25/16 */;
    font-size: 1.625rem /* 26/16 */;
    text-align: justify;
    color: #000000;
    line-height: 2.375rem /* 38/16 */;
    height: 4.75rem /* 76/16 */;
    font-weight: 500;
  }
  .news-desc {
    margin-top: 2.5rem /* 40/16 */;
    font-size: 1rem /* 16/16 */;
    line-height: 2rem /* 32/16 */;
    height: 4rem /* 64/16 */;
    color: #595757;
  }
}
.news-result {
  margin-top: 2.1875rem /* 35/16 */;
}
.news-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1.125rem /* 18/16 */;
}
.empty-box {
  padding: 4.375rem /* 70/16 */ 0;
  flex-direction: column;
  .empty-photo {
    width: 19.125rem /* 306/16 */;
  }
  .empty-text {
    font-size: .9375rem /* 15/16 */;
    color: #888888;
  }
}
</style> 